<template>
    <template v-if="breadList && breadList.length">
        <el-breadcrumb separator="/" class="animate__animated" :class="animateClass">
            <el-breadcrumb-item v-for="(name, index) of breadList" :key="index">{{ name }}</el-breadcrumb-item>
        </el-breadcrumb>
    </template>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, watchEffect, inject } from "vue";

//获取自定义全局方法
const { authStore } = inject<any>("method");

//动画样式
const animateClass = ref("");

//面包屑数组
const breadList: any = ref([]);

//不展示面包屑的路由
const noShowRoute: string[] = ["/system/home"];

//路由
const route = useRoute();

//监听路由变化
watchEffect(() => {
    //获取路由路径
    const path = route.fullPath;
    //所有面包屑列表
    const storeBread = authStore?.breadcrumbList ?? [];
    animateClass.value = "animate__fadeOut";
    //判断是否展示面包屑
    if (noShowRoute.includes(path)) {
        breadList.value = [];
    } else {
        setTimeout(() => {
            breadList.value = storeBread?.filter((item: any) => item?.route == path).map((item: any) => item.bread)[0];
            animateClass.value = "animate__fadeInDown";
        }, 500);
    }
});
</script>

<style scoped lang="less">
.el-breadcrumb {
    padding: 10px;
}
</style>
